﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="example.aspx.cs" Inherits="example" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.dragsort-0.4.2.min.js"></script>
    <style type="text/css">
        .leftsonglist 
        {
            float: left;
            width: 350px;
        }
        .rightset 
        {
            width: 350px;
        }
        .draglist
        {
            padding-left: 0px;
            margin-left: 0px;
            margin-top: 0px;
            padding-top: 0px;
            width: 325px;
            list-style-type: none;
        }
        .node_wrapper
        {
            border: 1px solid gray; /*margin: 5px 0 5px 0;*/
            margin: 0;
            padding: 2px;
        }
        
        .node_song, .node_key, .node_singer
        {
            display: inline-block;
        }
        
        .node_song
        {
            width: 200px;
            cursor: pointer;
        }
        .node_key
        {
            width: 25px;
            font-weight: bold;
        }
        .node_singer
        {
            display: inline;
            width: 50px;
            color: Green;
        }
        
        
        .placeHolder div
        {
            background-color: white !important;
            border: dashed 1px gray !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>
            jQuery List DragSort ASP.NET Example</h1>
        <a href="http://dragsort.codeplex.com/">Homepage</a><br />
        <br />
        <table width="800px">
        <tr>
        <td width="400px" valign=top>
            <h2>Song List</h2>
            <ul id="songlist" class="draglist">
	            <li id="node1"><div class="node_wrapper"><div class="node_song">Mustang Sally</div><div class="node_key">C</div><div class="node_singer">Natalie</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>
	            <li id="node2"><div class="node_wrapper"><div class="node_song">Get Ready</div><div class="node_key">G</div><div class="node_singer">Sophia</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>
	            <li id="node3"><div class="node_wrapper"><div class="node_song">Signed Sealed Delivered</div><div class="node_key">C</div><div class="node_singer">Norm/Nat</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>
	            <li id="node4"><div class="node_wrapper"><div class="node_song">Rolling in the Deep</div><div class="node_key">F</div><div class="node_singer">Sophia</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>
	            <li id="node5"><div class="node_wrapper"><div class="node_song">Are You Gonna Go My Way</div><div class="node_key">Eb</div><div class="node_singer">Norm</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>
	            <li id="node6"><div class="node_wrapper"><div class="node_song">Hella Good</div><div class="node_key">Ab</div><div class="node_singer">Natalie</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>
	            <li id="node7"><div class="node_wrapper"><div class="node_song">Bring Me to Life (Evanessance)</div><div class="node_key">D</div><div class="node_singer">Sophia</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>
	            <li id="node8"><div class="node_wrapper"><div class="node_song">Soul Man</div><div class="node_key">F</div><div class="node_singer">Norm</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>	
	            <li id="node9"><div class="node_wrapper"><div class="node_song">Please Don't Stop The Music / Mamma Say (Michael Jackson)</div><div class="node_key">F</div><div class="node_singer">Soph/Norm</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>	
	            <li id="node10"><div class="node_wrapper"><div class="node_song">Mamma Told Me Not To Come</div><div class="node_key">C</div><div class="node_singer">Sophia</div><a href="EditSong.aspx"><img align="right" src="images/edit.gif" /></a></div></li>
            </ul>
        </td>
        <td width="400px" valign=top>
            <h2>
                Set 1</h2>
            <ul id="set1" class="draglist">
            </ul>
            <br />
            <h2>
                Set 2</h2>
            <ul id="set2" class="draglist">
            </ul>
            <br />
            <h2>
                Set 3</h2>
            <ul id="set3" class="draglist">
            </ul>
        </td>
        </tr>
        </table>

        <script type="text/javascript">
            $("#songlist, #set1, #set2, #set3").dragsort({ dragSelector: "div.node_song", dragSelectorExclude: "a", 
                dragBetween: true, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
        </script>
        <br style="clear: both;" />
        <div style="display: block;">
        <h2>
            Save list order with ajax:</h2>
        <ul id="gallery">
            <asp:Repeater ID="Gallery" runat="server">
                <ItemTemplate>
                    <li itemid='<%# Container.ItemIndex %>'>
                        <div>
                            <%# Container.DataItem %></div>
                    </li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
        </div>
        <script type="text/javascript">
		    $("#gallery").dragsort({ dragSelector: "div", dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });

		    function saveOrder() {
				var data = $("#gallery li").map(function() { return $(this).attr("itemID"); }).get();
				$.ajax({ url: "example.aspx/SaveListOrder", data: '{ids:["' + data.join('","') + '"]}', dataType: "json", type: "POST", contentType: "application/json; charset=utf-8" });
		    };
        </script>
        <div style="clear: both;">
        </div>
    </div>
    </form>
</body>
</html>
